<template>
	<eui-page-frame topHeight="120" bottomHeight="44">
		<template #top>
			<view class="content-img">
				<view class="navigation menu-seach">
					<eui-nav-bar title="选择部门" color="#000000" rightIcon=""></eui-nav-bar>
					<eui-search-bar @confirm="screenOperation" @clear="screenOperation(false)" v-model="seachText"
						placeholder="请输入编码或名称"></eui-search-bar>
				</view>
			</view>
		</template>
		<eui-page-content>
			<view class="list-card">
				<scroll-view class="list-card-content" scroll-y="true" v-bind:style="{height:c_height}"
					@scrolltolower="lower">
					<view class="uni-list" v-if="isRadio">
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in selectDataArray"
								:key="index">
								<view>
									<radio :value="index" activeBackgroundColor="#02B7E6" />
								</view>
								<view>
									<view>[{{item.c_adno}}]{{item.c_name}}</view>
								</view>
							</label>
						</radio-group>
					</view>
					<view class="uni-list" v-else>
						<checkbox-group @change="checkboxChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item) in selectDataArray"
								:key="item.c_adno">
								<view>
									<checkbox :value="item.c_adno" activeBackgroundColor="#02B7E6"
										:checked="checkbox.includes(item.c_adno)" />
								</view>
								<view>
									<view>[{{item.c_adno}}]{{item.c_name}}</view>
								</view>
							</label>
						</checkbox-group>
					</view>
				</scroll-view>

			</view>
		</eui-page-content>
		<template #bottom>
			<view class="bt-button">
				<eui-button type="max2" title="取消" @click="cancel" />
				<eui-button type="max" title="确定" @click="ConfirmReturn" />
			</view>
		</template>
	</eui-page-frame>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useRoute } from 'vue-router';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import useService from '@/hooks/useService';
	const service = useService({ prefix: "mainApi" });
	const LoginStore = useLoginStore();
	const sUserStore = ref('');
	const sUserStoreName = ref('');
	const height = ref(0);
	const searchText = ref('');
	const listManager = ref([])
	const CurrentPage = ref(1);
	const PageSize = ref(20);
	const RowsCount = ref(0);
	const PageCount = ref(1);
	const title = ref('');
	const type = ref('');
	const isRadio = ref(true);
	const c_seachText = ref('');
	const IsMult = ref('')
	const selectDataArray = ref([]);
	const current = ref(-1)
	const checkbox = ref([]); //选中
	const c_height = ref(0);


	onShow(() => {
		setTimeout(() => {
			uni.getSystemInfo({
				success: res => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.menu-seach').boundingClientRect(data => {
						c_height.value = (res.windowHeight - data.height - 54) + 'px';
					}).exec();
				}
			});
		}, 1000)
	})

	onLoad(async (option) => {
		if (option) {
			type.value = option.type;
			isRadio.value = option.IsMult && option.IsMult == '是' ? false : true;
			title.value = '部门选择';
			await querydata();
			if (option.IsMult == '是' && option.SelectedItems) {
				checkbox.value = option.SelectedItems.split(",");;
			}
		}
	})
	const radioChange = (evt) => {
		console.log('radioChange', evt)
		current.value = evt.detail.value;
	}
	const checkboxChange = (evt) => {
		checkbox.value = evt.detail.value;
	}
	const lower = async () => {
		// CurrentPage: 1, //第几页  PageSize: 10, //每页10条  RowsCount: 0, //总条数 PageCount: 1, //总页数
		if (CurrentPage.value < PageCount.value) {
			CurrentPage.value = CurrentPage.value + 1;
			await querydata(true);
		}
	}
	const querydata = async (e) => {
		if (!e) {
			CurrentPage.value = 1;
		}
		const req = {
			IsNotPage: false,
			CurrentPage: CurrentPage.value,
			PageSize: PageSize.value,
			WhereList: []
		};
		if (c_seachText.value) {
			req.WhereList.push({
				c_col: "c_name",
				c_oper: "相似",
				c_value: c_seachText.value,
				c_logic: "或者",
			});
			req.WhereList.push({
				c_col: "c_adno",
				c_oper: "相似",
				c_value: c_seachText.value,
				c_logic: "而且",
			});
		}
		const res = await service.request('h5depart', 'EnjoyQueryList', req);
		if (res) {
			const ObjectData = res.ReturnObject;
			PageCount.value = res.PageCount;
			if (ObjectData.length > 0) {
				selectDataArray.value = selectDataArray.value.concat(ObjectData);
			}
		}
	}
	// 确定返回
	const ConfirmReturn = () => {
		if (isRadio.value) {
			if (current.value === -1) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '请先勾选！'
				});
				return false;
			}
			console.log('current.value', current.value)
			AddSelectDataToPrePage(selectDataArray.value[current.value])
		} else {
			if (checkbox.value.length === 0) {
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '请先勾选！'
				});
				return false;
			}
			let DataArray = {
				list: checkbox.value,
			}
			AddSelectDataToPrePage(DataArray)
		}
	}
	// 取消
	const cancel = () => {
		uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
			delta: 1
		});
	}
	// 带上选择的数据返回上级
	const AddSelectDataToPrePage = (param) => {
		//通知上一界面刷新
		if (param) {
			try {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.$.exposed.SelectionChanged('depart', param); //执行函数也是同理
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			} catch (e) {
				console.log(JSON.stringify(e));
				//TODO handle the exception
			}
		}
	}
	const screenOperation = async (e) => {
		selectDataArray.value = [];
		if (!e) {
			c_seachText.value = '';
		}
		else {
			c_seachText.value = e.value;
		}
		await querydata();
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.list-card {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.list-card-content {
		width: 100%;
		height: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		padding: 0rpx 28rpx;
	}

	.uni-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	uni-radio-group,
	uni-checkbox-group {
		width: 100%;
	}

	uni-radio-group {
		display: block;
	}

	.uni-list-cell {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}

	.uni-list-cell-pd {
		padding: 10px 0px;
	}

	.uni-list-cell::after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 0px;
		height: 1px;
		content: "";
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.uni-list-cell:last-child::after {
		height: 0px;
	}

	.uni-list:after {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: "";
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	// .menu-footer {
	// 	display: flex;
	// 	flex-direction: row;
	// 	flex: auto;
	// 	padding: 7px 12px;
	// 	box-sizing: border-box;
	// }

	// .menu-footer button {
	// 	height: 40px;
	// 	border: none;
	// 	border-radius: 5px;
	// 	color: #fff;
	// 	line-height: 40px;
	// }

	// uni-button:after {
	// 	border: none;
	// }
	.bt-button {
		background-color: #FFFFFF;
		padding: 10rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
</style>
